<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .sum {
        height: 50px;
        /* display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            font-family: 700; */
        text-align: center;
        font-size: 28px;
        font-family: 700;
      }
      .box {
        height: 200px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      .a {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        color: aliceblue;
        font-family: 700;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: rgb(77, 6, 243);
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        color: aliceblue;
        font-family: 700;
      }
      button {
        width: 100px;
        height: 30px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="sum">
      <span class="">双色球开奖</span> <br />
      <button class="btn1">开始摇奖</button>
      <button class="btn2">停止摇奖</button>
    </div>
    <div class="box">
      <span class="one a">0</span>
      <span class="two a">0</span>
      <span class="three a">0</span>
      <span class="four a">0</span>
      <span class="five a">0</span>
      <span class="six a">0</span>
      <span class="sever b">0</span>
    </div>
    <script>
      let bnt1 = document.querySelector(".btn1");
      let bnt2 = document.querySelector(".btn2");
      let one = document.querySelector(".one");
      let two = document.querySelector(".two");
      let three = document.querySelector(".three");
      let four = document.querySelector(".four");
      let five = document.querySelector(".five");
      let six = document.querySelector(".six");
      let sever = document.querySelector(".sever");

      let time7 = 0;
      let time7s = null;
      let time1 = 0;
      let time1s = null;
      let time2 = 0;
      let time2s = null;
      let time3s = null;
      let time4s = null;
      let time5s = null;
      let time6s = null;
      function sever7() {
        if (time7 >= 16) {
          time7 = 0;
        }
        time7++;
        sever.innerHTML = time7;
      }
      function one1() {
        let a = Math.random() * (1 - 33) + 33;
        one.innerHTML = parseInt(a);
      }
      function two2() {
        let a = Math.random() * (1 - 33) + 33;
        two.innerHTML = parseInt(a);
      }
      function three3() {
        let a = Math.random() * (1 - 33) + 33;
        three.innerHTML = parseInt(a);
      }
      function four4() {
        let a = Math.random() * (1 - 33) + 33;
        four.innerHTML = parseInt(a);
      }
       function five5() {
        let a = Math.random() * (1 - 33) + 33;
        five.innerHTML = parseInt(a);
      }
       function six6() {
        let a = Math.random() * (1 - 33) + 33;
        six.innerHTML = parseInt(a);
      }
      bnt1.onclick = function () {
        time7s = setInterval(sever7, 100);
        time1s = setInterval(one1, 100);
        time2s = setInterval(two2, 100);
        time3s = setInterval(three3, 100);
        time4s = setInterval(four4, 100);
        time5s = setInterval(five5, 100);
        time6s = setInterval(six6, 100);
      };

      bnt2.onclick = function () {
        clearInterval(time7s);
        clearInterval(time1s);
        clearInterval(time2s);
        clearInterval(time3s);
        clearInterval(time4s);
        clearInterval(time5s);
        clearInterval(time6s);
      };
    </script>
  </body>
</html>
